<template>
	<div>
		<div class="h2">
			申请详情
			<a-button v-if="this.$route.query.type==1&&this.$route.query.source=='积分申请审批列表'" type="primary" style="float: right;margin-top: 4px;" @click="detailShen(info)">审批</a-button>
			<a href="#examBox" v-if="flowType!==2"><a-button style="float: right;margin-top: 4px;" type="primary">审批</a-button></a>
		</div>
		<div>
			<div class="main-apply" style="width: 54%;float: left;overflow-y: scroll;height: 500px;background: #fff;">
				<div class="h3">申请信息</div>
				<div class="message" v-if="!isAgreeUpdate">
					<div class="con">
						<div class="tit">编 号：</div>
						<div class="cell">{{ info.No }}</div>
					</div>
					<div class="con">
						<div class="tit">名 称：</div>
						<div class="cell">{{ info.Title }}</div>
					</div>
					<div class="con">
						<div class="tit">课程类型：</div>
						<div class="cell">{{ info.ActivityTypeName||info.ActivityTypePrizeName }}
							<a-tag color="green" class="applynum">当前学期已申请{{ applyNum }}次</a-tag>
						</div>
					</div>
					<div class="con">
						<div class="tit">状态：</div>
						<div class="cell">{{ info.StateName }}</div>
					</div>
					<div class="con">
						<div class="tit">周期：</div>
						<div class="cell">{{ info.CreditSessionName }}</div>
					</div>
					<div class="con">
						<div class="tit">类型：</div>
						<div class="cell">{{ info.MemberTypeName ||info.ActivityTypePrizeName}}</div>
					</div>
					<div class="con">
						<div class="tit">参加/获奖时间：</div>
						<div class="cell">{{ info.GetTime }}</div>
					</div>
					<div class="con">
						<div class="tit">分值：</div>
						<div class="cell">{{ info.Score }}</div>
					</div>
					<div class="con">
						<div class="tit">添加人：</div>
						<div class="cell">{{ info.AddUserNo}}/{{ info.AddUserName}}</div>
					</div>
					<div class="con">
						<div class="tit">添加时间：</div>
						<div class="cell">{{ info.AddTime}}</div>
					</div>
					<div class="con" v-for="(items,index) in formData" :key="items.ID">
						<div class="tit">{{items.Name}}：</div>
						
						<div class="cell" v-if="items.FieldType == 5 || items.FieldType == 6"><a style="color: #1890ff;" :href="requestUrl+items.Value">{{items.Name}}</a></div>
						<div class="cell" v-else>{{ items.Value}}</div>
					</div>
				</div>
				<add v-show="isAgreeUpdate" :text="updateText" :isCreditApplyDetail="true" @closeFun="changeState"/>
			</div>
			<div class="main-apply" style="width: 45%;float: right;overflow-y: scroll;height: 500px;background: #fff;">
				<div class="h3">附件信息</div>
				<div class="message">
					<div class="tableZdy">
						<div class="imagecon">
							<div class="imagelist" v-for="(item,i) in oldList" :key="i">
								<div class="iconcon">
									<img v-if="item.FilePath.indexOf('jpg')>0||item.FilePath.indexOf('png')>0" :src="requestUrl+item.FilePath" />
									<div v-else class="fileicon">{{ item.FilePath.split('.')[1] }}</div>
								</div>
								<div class="title">{{ item.FileName }}</div>
								<div class="oprate">
									<oprateBtn title="下载" icon="icon-xiazai-wenjianxiazai-04" color="#1890FF" @tap="downloadFile(item, 1)" ></oprateBtn>
								</div>
							</div>
							<div class="el-table__empty-text" style="margin:0 auto;" v-show="oldList.length==0"></div>
						</div>
					</div>
					<!-- <a-list class="fileListArea" size="small" bordered :dataSource="oldList">
						<a-list-item slot="renderItem" slot-scope="item, index" style="display: flex;">
							<div style="flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
								<div style="width: 96%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #1890ff;cursor: pointer;"
									@click="downloadFile(item, 1)">{{ item.FileName }}</div>
							</div>
							</a-list-item>
					</a-list> -->
				</div>
				<div class="h3">审批信息</div>
				<a-steps class="apply-con" progress-dot v-if="flowData.length > 0" :current="999" direction="vertical">
					<a-step v-for="(item, index) in flowData" :key="index">
						<template slot="title">
							{{ item.FlowTypeName + (item.ExamUserName ? ' | ' + item.ExamUserName + ' | ' : '') + (item.IsAdopt == null ? ' | 未审核' : item.IsAdopt ? '通过' : '驳回') }}
						</template>
						<div slot="title" class="flowuser flex" v-if="item.ExamUserData&&item.ExamUserData.length>0">
							可审批人：
							<div class="flowusercon flex-1">
								<div class="flowuserlist" v-for="(flowitem, flowindex) in item.ExamUserData"
									:key="flowindex">{{ flowitem.Name }} - {{ flowitem.UserNo }} -
									{{ flowitem.DepartName }}</div>
							</div>
						</div>
						<div slot="subTitle">{{ item.ExamComment }}</div>
						<div slot="description">{{ item.ExamTime }}</div>
					</a-step>
				</a-steps>
				<div v-if="flowData.length == 0" class="nothing">暂无审批信息</div>
			</div>
			<div style="clear: both;"></div>
			</div>
			<div class="h3" id="examBox" v-if="flowType!==2">审批</div>
			<div class="exam" v-if="flowType!==2">
			<a-form-model ref="ruleForm" :model="form" :rules="rules" style="margin-top:50px;">
				<a-form-model-item label="审核状态" prop="isAdopt">
					<a-radio-group name="radioGroup" v-model="form.isAdopt">
						<a-radio :value="true">通过</a-radio>
						<a-radio :value="false">驳回</a-radio>
					</a-radio-group>
				</a-form-model-item>
				<a-form-model-item label="审核意见" :prop="!form.isAdopt?'comment':''"><a-input type="textarea" :auto-size="global.textareaHeight" v-model="form.comment" /></a-form-model-item>
				<a-form-model-item label="" class="fixed-bottom">
					<a-button type="primary" @click="handleSubmit1">提交</a-button>
					<a-button style="margin-left: 10px;" @click="closeFunction">取消</a-button>
				</a-form-model-item>
			</a-form-model>
			</div>
			<div class="h3" style="margin: 10px 0;">历史申请记录</div>
			<div class="message">
				<el-table stripe :data="applydata" border>
					<el-table-column type="index" label="序号" width="60" fixed="left"></el-table-column>
					<el-table-column prop="No" label="编号" width="120"></el-table-column>
					<el-table-column prop="Title" label="活动/课程类型" min-width="140" align="left">
						<template slot-scope="scope">
							<div style="text-align: left;">
								<a-tag
									:color="scope.row.State<4?'blue':scope.row.State==4?'green':scope.row.State>4?'red':''">
									{{ scope.row.StateName}}
								</a-tag>
								{{ scope.row.ActivityTypeName }}
							</div>

						</template>
					</el-table-column>
					<el-table-column prop="Title" label="课程名称" min-width="100" align="left">
					</el-table-column>
					<el-table-column prop="ActivityTypePrizeName" label="参与/获奖" width="140" show-overflow-tooltip>
						<template slot-scope="scope">
							{{ scope.row.ActivityTypePrizeName||scope.row.MemberTypeName }}
						</template>
					</el-table-column>
					<el-table-column prop="Score" label="分值" width="80" show-overflow-tooltip=""></el-table-column>
					<el-table-column prop="AddTime" label="申请时间" width="140" show-overflow-tooltip=""></el-table-column>
				</el-table>
				<pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
					:pagination="pagination"></pagination>
			</div>


		<!-- 积分申请审批 -->
		<activityApplyExam :isShow="false" :text="text" :textArr="textArr" v-show="applyIf" @closeFun="closeFun">
		</activityApplyExam>
		<!-- <apply :text="text" v-show="applyIf" @closeFun="closeFun"></apply> -->
		<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel"><img alt="example" style="width: 100%"
				:src="previewImage" /></a-modal>
	</div>
</template>

<script>
	import pagination from '@components/pagination/index.vue';
	import Cache from '@/utils/cache';
	import moment from 'moment';
	import Func from '@/utils/func';
	import activityApplyExam from '@/components/CreditFlow/activityApplyExam';
	import add from '../CreditFlow/add.vue';
	import {
		ManageCreditApplyDoGetDetail,
		GetActivityTypeList,
		GetActivityFileList,
		ManageCreditFlowDoGetDetail,
		ManageCreditApplyDoGetPageByUserNoList,
		ManageCreditApplyDoGetCountByUserNo,
		ManageCreditFlowDoExam
	} from '@/api/follow';
	// import apply from './apply';
	const data = [];
	export default {
		components: {
			activityApplyExam,
			add
			// apply
		},
		data() {
			return {
				textArr: [],
				textall: {},
				applyIf: false,
				applyIf2: false,
				addIf: false,
				layoutContentHeight: window.innerHeight - 268 + 'px',
				icofileList: [],
				fileList: {},
				previewVisible: false,
				previewImage: '',
				fileList1: [],
				previewVisible1: false,
				previewImage1: '',
				data,
				flowData: [],
				formData:[],
				applyIf: false,
				ActivityTypeList: [],
				formLayout: 'horizontal',
				form: this.$form.createForm(this, {
					name: 'coordinated'
				}),
				formValue: {},
				dataValue: {},
				info: {},
				form: {
					isAdopt: true,
					comment: ''
				},
				rules: {
					isAdopt: [
						{
							required: true,
							message: '请选择审核状态',
							trigger: 'change'
						}
					],
					comment: [
						{
							required: true,
							message: '请输入审核意见',
							trigger: 'change'
						}
					]
				},
				text: {},
				oldList: [],
				requestUrl: this.global.requestUrl,
				token: Cache.get('token'),
				IsHour: true,
				applydata: [],
				pagination: {
					currentPage: 1,
					pageSize: 5,
					pageSizeOptions: [5, 20, 50], // 每页中显示的数据
					showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
				},
				flowType: this.$route.query.type,
				isAgreeUpdate: this.$route.query.IsAgreeUpdate,
				updateText:this.$route.query.text?JSON.parse(this.$route.query.text):{},
				applyNum: 0
			};
		},
		computed: {},
		async created() {
			// this.getOtherList();
			await this.getList();
			await this.getApplyList()
			await this.getApplyNum()
		},
		mounted() {},
		methods: {
			moment,
			changeState(isAgreeUpdate){
				this.isAgreeUpdate = !isAgreeUpdate
			},
			applyHander() {
				// let item={id:this.$route.query.ID}
				this.text = {
					ID: this.$route.query.ID
				};
				this.applyIf = true;
			},
			handleSubmit1(e) {
				this.$refs.ruleForm.validate(async valid => {
					if (!this.form.isAdopt && !this.form.comment) {
						this.$message.error('请输入审核意见！');
						return false;
					}
					if (valid) {
						let that = this
						let data = this.form;
						data.id = this.$route.query.ID
						let res = await ManageCreditFlowDoExam(data);
						if (res.data.code === 0) {
							this.$message.success(res.data.msg);
							if(window.location.href.includes('examBox')){
								this.$router.go(-2);
							}else{
								this.$router.back(-1);
							}
						} else {
							this.$message.error(res.data.msg);
						}
					} else {
						return false;
					}
				});
			},
			async downloadFile(item) {
				const fileName = item.FileName;
				let url = this.requestUrl + item.FilePath
				let x = new XMLHttpRequest();
				x.open("GET", url, true);
				x.responseType = "blob";
				x.onload = function() {
			  //self.exportLoading = false;
					let url = window.URL.createObjectURL(x.response);
					let a = document.createElement("a");
					a.href = url;
					a.download = fileName;
					a.click();
				};
				x.send();
				// window.open(hrefUrl, '_blank');
			},
			async getApplyList() {
				let data1 = {
					pageIndex: this.pagination.currentPage,
					pageSize: this.pagination.pageSize,
					applyUserNo: this.info.AddUserNo
				}
				let res1 = await ManageCreditApplyDoGetPageByUserNoList(data1);
				this.applydata = res1.data.data;
				const pagination = {
					...this.pagination
				};
				pagination.total = res1.data.pageInfo ? res1.data.pageInfo.TotalItemCount : 0;
				this.pagination = pagination;
			},
			detailShen(info) {
				this.textArr = [];
				this.textArr.push(info);

				if (this.$route.query.type == 1 && this.$route.query.source == '积分申请审批列表') {
					this.applyIf = true;
				}

			},
			handleSizeChange(val) {
				this.pagination.pageSize = val;
				this.getApplyList();
			},
			handleCurrentChange(val) {
				this.pagination.currentPage = val;
				this.getApplyList();
			},
			async getList() {
				let that = this;
				let data = {};
				data.id = this.$route.query.ID;
				let res = {}
				if (this.$route.query.source == '申请管理列表') {
					res = await ManageCreditApplyDoGetDetail(data)
				}
				if (this.$route.query.source == '申请审批列表') {
					res = await ManageCreditFlowDoGetDetail(data)

				}
				this.info = res.data.data;
				this.oldList = res.data.fileData;
				 this.formData = res.data.formData;
				this.flowData = res.data.flowData;

			},
			async getApplyNum() {
				let data = {
					applyUserNo: this.info.AddUserNo,
					activityTypeID: this.info.ActivityTypeID
				}
				let res = await ManageCreditApplyDoGetCountByUserNo(data)
				this.applyNum = res.data.data
			},
			closeFunction(data) {
				this.$emit('closeFun', data);
			},

			closeFun() {
				this.applyIf = false;
			},
			handleCancel() {
				this.previewVisible = false;
				this.previewImage = '';
			},
			async handlePreview(file) {
				// let nameType = file.name.substr(file.name.lastIndexOf('.') + 1)
				// if(this.global.imgTypeList.findIndex(m=>{return m==nameType})<0){
				// 	this.$message.error('该文件格式不支持预览')
				// 	return false
				// }else{
				// 	this.previewImage = file.url;
				// 	this.previewVisible = true;
				// }
				this.previewImage = file.url;
				window.open(this.previewImage, '_blank');
			},
			icohandleChange({
				fileList
			}, name) {
				this.icofileList = fileList;
				if (fileList.length == 0) {
					this[name] = {};
				} else {
					if (fileList[0].status == 'done') {
						this[name] = this.requestUrl + fileList[0].response.url;
						let url = this.requestUrl + fileList[0].response.url;
						this.formValue = Object.assign(this.formValue, {
							[name]: url
						});
					}
				}
			},
			handleChange({
				fileList
			}, name) {
				this.fileList[name] = fileList;
				if (fileList.length == 0) {
					this[name] = {};
				} else {
					if (fileList[0].status == 'done') {
						this[name] = this.requestUrl + fileList[0].response.url;
						let url = this.requestUrl + fileList[0].response.url;
						this.formValue = Object.assign(this.formValue, {
							[name]: url
						});
					}
				}
			},
			dataChange(e, name, type) {
				if (type == 'data') {
					let time = moment(e).format('YYYY-MM-DD HH:mm:ss');
					this.dataValue = Object.assign(this.dataValue, {
						[name]: time
					});
				} else {
					let time = moment(e).format('HH:mm:ss');
					this.dataValue = Object.assign(this.dataValue, {
						[name]: time
					});
				}
			},
			handleSubmit(e) {
				e.preventDefault();
				this.form.validateFields(async (err, values) => {
					if (!err) {
						let data = values;
						data = Object.assign(data, this.formValue, this.dataValue);
						if (data.activityDate) {
							data.StartTime = moment(data.activityDate[0]).format('YYYY-MM-DD HH:mm:ss');
							data.EndTime = moment(data.activityDate[1]).format('YYYY-MM-DD HH:mm:ss');
						}
						data.ClubID = '63e6e20243d04c0094fe3cb27b244720';
						let res = await UpdateActivity(data);
					}
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	.main {
		height: 90%;
		width: 60%;
		overflow-y: scroll;
		float: left;
	}

	.main-apply {

		// width: 36%;
		// float: right;
		.apply-con {
			margin-top: 20px;

			/deep/.ant-steps-item-content {
				width: 90%;
			}

			/deep/.ant-steps-item-subtitle {
				display: block;
				margin-left: 0px;
			}
		}

		.nothing {
			text-align: center;
			margin: 50px auto;
		}

		.message {
			padding: 10px;

			.con {
				width: 100%;
				line-height: 40px;
				height: 40px;
				border-bottom: 1px dashed #eee;
				padding: 0 10px;
				overflow: hidden;

				.tit {
					float: left;
					width: 110px;
				}

				.cell {
					float: left;
				}
			}
		}
	}

	.h3 {
		font-size: 14px;
		background: #f6f8f8;
		color: #1890ff;
		padding: 4px 10px;
	}

	/deep/.ant-form-item {
		margin: 4px 10px;
		display: flex;
	}

	/deep/.ant-form-item-label {
		width: 180px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: right;
	}

	/deep/.ant-form-item-control-wrapper {
		flex: 1;
	}

	/deep/.ant-calendar-picker,
	/deep/.ant-time-picker {
		width: 100%;
	}

	.fixed-top {
		width: inherit;
		position: absolute;
		line-height: 30px;
		top: 0px;
		background-color: white;
		z-index: 999;
		padding: 10px 0 0 10px;
	}

	.fixed-bottom {
		width: 164px;
		left: 50%;
		bottom: 0px;
		margin: 0px 0px 0px -82px !important;
		background-color: white;
		z-index: 999;
	}

	/deep/.ant-form {
		margin-top: 10px;
		padding-bottom: 10px;
	}

	.ant-calendar-picker,
	.ant-time-picker {
		width: 100%;
	}

	.applynum {
		margin-left: 20px;
	}
</style>
